<template>
  <div>
    <el-card class="box-card">
      <el-form
        ref="selectform"
        :inline="true"
        :model="selectform"
        class="demo-form-inline ManagementClass">
        <el-form-item
          prop="oneClassName"
          label="图片名称">
          <el-input
            v-model="selectform.oneClassName"
            placeholder="请输入图片名称"
            prefix-icon="el-icon-search"
            class="AuthorityInput managementBtn" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="selectSubmit('selectform')">查询</el-button>
          <el-button
            type="info"
            @click="selectResetForm('selectform')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card
      class="box-card"
      style="margin-top:6px">
      <el-table
        v-loading="loading"
        :data="tableData"
        size="medium"
        stripe
        style="width: 100%">
        <el-table-column
          show-overflow-tooltip
          prop="index"
          label="序号" />
        <el-table-column
          show-overflow-tooltip
          prop="imgurl"
          label="图片">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.imgurl"
              :preview-src-list="[scope.row.imgurl]"
              style="width: 40px; height: 40px"/>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="imgname"
          label="图片名称" />
        <el-table-column
          show-overflow-tooltip
          prop="createTimeString"
          label="创建时间" />
        <el-table-column
          label="操作"
          width="160">
          <template slot-scope="scope">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteBtn(scope.$index, scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <pagination
      :pager="pager"
      @search="search" />
  </div>
</template>

<script>
import { queryAll, deleteImg } from '@/api/ImgManagement/conmonImgApi/index'
import pagination from '@/components/pagination/index'

export default {
  components: {
    pagination
  },
  data() {
    return {
      pager: {
        pageSize: 10,
        currentPage: 1,
        totalPage: 0
      },
      tableData: [],
      selectform: {
        oneClassName: ''
      },
      loading: false
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    search() {
      this.getInfo()
    },
    getInfo() {
      this.loading = true
      queryAll(this.parameter()).then(res => {
        res.data.rows.forEach((item, index) => {
          item.index = index + 1 + (this.pager.currentPage - 1) * this.pager.pageSize
          return item
        }
        )
        this.tableData = res.data.rows
        this.pager.totalPage = res.data.total
        this.loading = false
      })
    },
    parameter() {
      const obj = {
        current: this.pager.currentPage,
        size: this.pager.pageSize,
        keywordOne: this.selectform.oneClassName,
        keywordTwo: '5'
      } // 默认列表字段数据
      return obj
    },
    // 搜索
    selectSubmit(formName) {
      this.pager.currentPage = 1
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.getInfo()
        } else {
          return false
        }
      })
    },
    // 搜索重置
    selectResetForm(formName) {
      this.pager.currentPage = 1
      this.$refs[formName].resetFields()
      this.getInfo()
    },
    // 删除
    deleteBtn(index, row) {
      this.$confirm('您确定要删除吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteImg(row.id).then(res => {
            this.$message({
              message: res.data,
              type: 'success'
            })
            this.getInfo()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
